<template>
    <div class="customerservice_main">

        <el-row class="head">
            <el-col :span="24">
                <h1 class="customerservice_title">客户服务</h1>
                <span class="" style="margin-left: 10px">/ 为客户进行答疑、故障排除、升级、培训等业务</span>
            </el-col>
        </el-row >

        <el-row class="nav" style=" border-radius: 4px">
            <el-col>
                <div class="nav-item" @click="dialogFormVisible = true"><i class="iconfont icon-qianbi"></i> 新增</div>

                <router-link to="/ServeTypeManager"><div class="nav-item" ><i class="iconfont icon-m-weixinwenzhang"></i> 类型管理</div></router-link>

                <div class="nav-item2">
                    <download-excel :data="tableData" :fields="excelFields" name="客户服务记录表.xls" type="xls">
                        <el-button type="text">
                            <i class="iconfont icon-excel"></i>Excel导出
                        </el-button>
                    </download-excel>
                </div>

                <el-form style="display:inline-block">
                    <div class="nav-item" style="border:none">
                        <el-input v-model="searchParam" clearable placeholder="请输入内容"></el-input>
                    </div>

                    <div style="display:inline-block">
                        <el-button  @click="searchK">搜索</el-button>
                    </div>
                </el-form>

            </el-col>
        </el-row>

<!--   数据表格        -->
        <div class="content" style=" border-radius: 4px;">

            <el-tabs style="margin-bottom: 0px;height: 41px;" type="card" @tab-click="changeTab">
                <el-tab-pane label="全部" name="first"></el-tab-pane>

                <template v-for="types in ServeTypeList">
                    <el-tab-pane :label="types.serveTypeName" ></el-tab-pane>
                </template>
            </el-tabs>

            <el-table :data="tableData" style="width: 100%;min-height: 300px;margin: 1px;" @cell-click="godetail">

                <el-table-column prop="serveRecId" type="selection" style="" header-align="center" align="center" ></el-table-column>

                <el-table-column label="编号" style="">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.serveRecId }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="概要" style="">
                    <template slot-scope="scope">
                        {{scope.row.serveName}}
                    </template>
                </el-table-column>

                <el-table-column label="对应客户" style="">
                    <template slot-scope="scope">
                        {{scope.row.customer.customerName}}
                    </template>
                </el-table-column>

                <el-table-column label="服务类型" style="">
                    <template slot-scope="scope">
                        {{scope.row.serveType.serveTypeName}}
                    </template>
                </el-table-column>

                <el-table-column label="服务方式" style="">
                    <template slot-scope="scope">
                        {{scope.row.serveMode.serveModeName}}
                    </template>
                </el-table-column>

                <el-table-column label="开始日期" style="">
                    <template slot-scope="scope">
                        {{scope.row.beginTime | formatDate}}
                    </template>
                </el-table-column>

                <el-table-column label="执行人" style="">
                    <template slot-scope="scope">
                        {{scope.row.dealEmp.empName}}
                    </template>
                </el-table-column>

                <el-table-column label="花费时间" style="">
                    <template slot-scope="scope">
                        {{scope.row.expTime}}
                    </template>
                </el-table-column>

                <el-table-column label="状态" style="">
                    <template slot-scope="scope">
                        <span v-if="scope.row.serveState==1" >无需处理</span>
                        <span v-if="scope.row.serveState==2" >未曾处理</span>
                        <span v-if="scope.row.serveState==3" >正在处理</span>
                        <span v-if="scope.row.serveState==4" >处理完成</span>
                    </template>
                </el-table-column>

                <el-table-column label="管理" style="">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="editOne(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="deteleOne(scope.row)"></el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!--    分页-->
            <div class="pagePlug">
                <div class="block" style="margin-top:10px">
                    <el-pagination background layout="total, prev, pager, next"
                                   :total="totalSize"
                                   :page-size="pageSize"
                                   @current-change="changePage" >
                    </el-pagination>
                </div>
            </div>
        </div>

        <!--        新增弹窗  -->
        <el-dialog title="服务管理" :visible.sync="dialogFormVisible" width="50%">
            <el-form ref="form" :model="cusService" label-width="80px" style="overflow: hidden" class="ncsText">

                <el-form-item label="对应客户">
                    <el-select v-model="cusService.customer.customerId" value-key="customerId" placeholder="请选择客户" >
                        <el-option v-for="item in customerList"
                                   :key="item.customerId"
                                   :label="item.customerName"
                                   :value="item.customerId"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="服务概要">
                    <el-input v-model="cusService.serveName" style="width: 385px" ></el-input>
                </el-form-item>

                <el-form-item label="服务类型">
                    <el-select v-model="cusService.serveType.serveTypeId" placeholder="请选择">
                        <el-option label="故障排除" value=1></el-option>
                        <el-option label="答疑" value=2></el-option>
                        <el-option label="产品升级" value=3></el-option>
                        <el-option label="操作培训" value=4></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="服务方式">
                    <el-select v-model="cusService.serveMode.serveModeId" placeholder="请选择">
                        <el-option label="上门" value=1></el-option>
                        <el-option label="线上服务" value=2></el-option>
                        <el-option label="电话服务" value=3></el-option>

                    </el-select>
                </el-form-item>


                <el-form-item label="执行人">
                    <el-select v-model="cusService.dealEmp.empId" value-key="empId" placeholder="请选择执行人" >
                        <el-option v-for="item in empList"
                                   :key="item.empId"
                                   :label="item.empName"
                                   :value="item.empId"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="预计用时">
                    <el-input v-model="cusService.expTime" style="width:  385px" ></el-input>
                </el-form-item>

                <el-form-item label="服务内容">
                    <el-input
                            v-model="cusService.serveCon"
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 10}"
                            placeholder="请输入内容"
                            style="width: 500px">
                    </el-input>
                </el-form-item>

                <el-form-item label="客户反馈">
                    <el-input
                            v-model="cusService.cusFeed"
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 10}"
                            placeholder="请输入内容"
                            style="width: 500px">
                    </el-input>
                </el-form-item>

                <el-form-item label="状态">
                    <el-select v-model="cusService.serveState" placeholder="请选择">
                        <el-option label="无需处理" value=1></el-option>
                        <el-option label="未曾处理" value=2></el-option>
                        <el-option label="正在处理" value=3></el-option>
                        <el-option label="处理完成" value=4></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit(),dialogFormVisible = false">立即创建</el-button>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

    </div>
</template>

<script>
    import {formatTimeToStr} from '@/assets/format.js'

    export default {
        name: "CustomerService",
        data: function() {
            return {
                loading:true,
                searchParam:"",//搜索框内容
                kcName:"",//表头名字
                pageSize:5,//分页页大小
                currPage:1,//当前页码，默认为1
                totalSize:0,//总记录数
                tableData:[],
                dialogTableVisible: false,
                dialogFormVisible: false,
                cusService: {
                    serveRecId:0,
                    serveName:'',
                    serveCon:'',
                    cusFeed:'',
                    beginTime:'',
                    expTime:'',
                    serveState:0,
                    serveMode:{
                        serveModeId:0,
                        serveModeName:''
                    },
                    serveType:{
                        serveTypeId:0,
                        serveTypeName:''
                    },
                    callEmp:{empId:1},
                    dealEmp:{},
                    customer:{},
                    detailData:{},
                    check:0
                },
                customerList:{},
                empList:{},
                //Excel导出对应关系
                excelFields: {
                    "服务记录编号": "serveRecId",
                    "对应客户":"customer.customerName",
                    "服务概述": "serveName",		//支持嵌套属性
                    "服务内容": "serveCon",
                    "服务类型": "serveType.serveTypeName",
                    "服务方式": "serveMode.serveModeName",
                    "开始时间": "beginTime",
                    "执行人": "dealEmp.empName",
                    "客户反馈":"cusFeed",
                    "事件状态":{
                        field: "serveState",
                        callback: value => {
                            if(value==1){
                                return "无需处理"
                            }else if(value==2){
                                return "未曾处理"
                            }else if(value==3){
                                return "正在处理"
                            }else{
                                return "处理完成"
                            }}},
                    "客户联系人":"callEmp.empName",
                    "审批状态": {
                        field: "check",
                        callback: value => {
                            if(value==0){
                                return "未审批"
                            }else{
                                return "审批通过"
                            }
                        }
                    }
                },
                ServeTypeList:{}
            };
        },
        methods: {
            godetail(row, column){
                if("概要"== column.label){
                    console.log(row);
                    console.log(column.label);
                    this.detailData=row;
                    sessionStorage.setItem("customerService", JSON.stringify(this.detailData));
                    this.$router.push({path:"/customerservice-detail"});
                }
            },
            onSubmit(){
                this.$axios.post("api/after-sale/customer-service/add-service",this.cusService).then(v=>{
                    this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
                    this.dialogFormVisible = false;
                    this.cusService={
                        serveRecId:0,
                        serveName:'',
                        serveCon:'',
                        cusFeed:'',
                        beginTime:'',
                        expTime:'',
                        serveState:0,
                        serveMode:{
                            serveModeId:0,
                            serveModeName:''
                        },
                        serveType:{
                            serveTypeId:0,
                            serveTypeName:''
                        },
                        callEmp:{empId:6,empName:"客户联系人"},
                        dealEmp:{},
                        customer:{customerId:0,customerName:''},
                        check:0
                    }
                }).catch();
            },
            initData(currPage,pageSize,search,kcName){
                this.loading=true;
                this.$axios.get("api/after-sale/customer-service/service-list",{params:{page:currPage,size:pageSize,search:search,kcName:kcName}})
                    .then(v=>{
                        this.tableData = v.data.rows;
                        this.totalSize = v.data.total;
                        this.loading = false;
                    }).catch();
            },
            deteleOne(k){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("api/after-sale/customer-service/delete-cusServe",this.qs.stringify({csNo:k.serveRecId}))
                        .then(v=>{
                            this.initData();
                        }).catch();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            editOne(k){
                this.dialogFormVisible = true;
                this.cusService={
                    serveRecId:k.serveRecId,
                    serveName:k.serveName,
                    serveCon:k.serveCon,
                    cusFeed:k.cusFeed,
                    beginTime:k.beginTime,
                    expTime:k.expTime,
                    serveState:k.serveState,
                    serveMode:{
                        serveModeId:k.serveMode.serveModeId,
                        serveModeName:k.serveMode.serveModeName
                    },
                    serveType:{
                        serveTypeId:k.serveType.serveTypeId,
                        serveTypeName:k.serveType.serveTypeName
                    },
                    callEmp:{empId: k.callEmp.empId, empName: k.callEmp.empName},
                    dealEmp:{empId: k.dealEmp.empId, empName: k.dealEmp.empName},
                    customer:{customerId: k.customer.customerId, customerName: k.customer.customerName},
                    check:k.check
                }
            },
            searchK(){
                this.initData(1,this.pageSize,this.searchParam,this.kcName);
            },
            changeTab(tab){
                var KCname = tab.label;
                if (KCname=='全部'){
                    KCname ='';
                }
                this.kcName = KCname;
                this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
            },
            changePage(val){
                //val就是当前页码
                this.initData(val,this.pageSize,this.searchParam,this.kcName);
            },
            initCusList(){
                this.$axios.get("api/customer/select_cus")
                    .then(v=>{
                        this.customerList = v.data;
                    }).catch();
            },
            initEmpList(){
                this.$axios.get("api/after-sale/customer-care/emp-list")
                    .then(v=>{
                        this.empList = v.data;
                    }).catch();
            },
            initServeType(){
                this.$axios.get("api/after-sale/customer-service/serveTypeList")
                    .then(v=>{
                        this.ServeTypeList = v.data;
                    }).catch();
            }
        },
        created(){
            this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
            this.initCusList();
            this.initEmpList();
            this.initServeType();
        },
        filters: {
            formatDate: function(time) {
                if(time!=null&&time!="")
                {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                }else{
                    return "";
                }
            }
        }
    };
</script>

<style scoped="scoped">
    *{margin: 0;padding: 0;font-size: 14px;}
    /*标题部分*/
    .customerservice_main{background: #e4e7ee}
    .head{height:70px;background: #fcfbfd;line-height: 70px}
    .customerservice_title{display: inline-block;font-weight: unset;margin-left: 20px;font-size: 25px;}
    .el-col span{color: #b4b4bc}
    /*内容部分*/
    .nav{margin: 20px;background: #fcfbfd;width: 100%-40px;height: 55px;line-height: 55px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}
    .nav .nav-item{color:#636e7b;display: inline-block;height:25px;padding: 0px 15px;border-right: 1px solid #dcdfe6;line-height: 25px;cursor: pointer}
    .nav-item2{color:#636e7b;display: inline-block;height:25px;padding: 0px 15px;line-height: 25px;cursor: pointer}
    /*数据*/
    .content{min-height:350px;margin: 20px;background: #fcfbfd;width: 100%-40px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}
    /*分页*/
    .pagePlug{
        height: 50px;
        padding-top: 20px;
    }
    /*操作按钮*/
    .el-table .el-button{width: 30px;height: 30px}
    .el-button.is-circle{padding: 2px !important;}
    /*    弹窗*/
    .NTtitle{
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    .ncsText .el-form-item{width: 100%;margin-bottom: 22px !important;}
</style>